<template>
  <div class="mine">
    <van-card
      :title="flag ? name : '未登录/登录'"
      desc="暂未绑定手机号"
      @click="jumpToDetail()"
      thumb="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=38264187,2446895567&fm=26&gp=0.jpg"
    />
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item>
        <span class='info_data_top'>
          0.00
          <span>元</span>
        </span>
        我的余额
      </van-grid-item>
      <van-grid-item>
        <span class='info_data_middle'>
          0
          <span>个</span>
        </span>
        我的优惠
      </van-grid-item>
      <van-grid-item>
        <span class='info_data_end'>
          0
          <span>分</span>
        </span>
        我的积分
      </van-grid-item>
    </van-grid>
    <van-cell-group>
      <van-cell title="我的订单" value=">" icon="location-o" />
      <van-cell title="积分商城" value=">" icon="location-o" />
      <van-cell title="外卖会员卡" value=">" icon="location-o" />
      <van-cell title="服务中心" value=">" icon="location-o" />
    </van-cell-group>
    <section class="profile_my_order border-1px">
      <van-button type="danger" style="width: 100%" v-if="flag" @click="logout">退出登陆</van-button>
    </section>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import Vue from 'vue'
Vue.use(Dialog)
export default {
  name: 'Mine',
  data () {
    return {
      name: '',
      flag: false,
      user: ''
    }
  },
  methods: {
    jumpToDetail () {
      if (!this.flag) {
        this.$router.push('/login')
      }
    },
    getUserInfo () {
      const user = JSON.parse(localStorage.getItem('userInfo'))
      if (user) {
        this.name = user.name
        this.flag = true
      }
    },
    logout () {
      Dialog.alert({
        title: '退出',
        message: '确定退出吗?'
      }).then(
        action => {
          // 请求退出
          this.$store.dispatch('logout')
          localStorage.removeItem('userInfo')
          localStorage.removeItem('cart')
          this.flag = false
        }
      )
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
/deep/.van-card {
  background: #7ad7ba;
  font-size: 16px;
}
/deep/.van-card__title {
  height: 30px;
  font-size: 20px;
  margin-top: 10px;
  line-height: 30px;
  color: #fff;
}
/deep/.van-card__thumb img {
  border-radius: 50%;
  height: 90%;
  width: 90%;
  margin-top: 5px;
}
/deep/.van-ellipsis {
  color: #fff;
  margin-top: 20px;
}
/deep/.van-grid {
  height: 100px;
  font-size: 16px;
  color: #666;
}
/deep/.van-grid-item__content--horizontal {
  flex-direction: column;
}
/deep/.info_data_top {
  font-size: 30px;
  color: #f90;
  font-weight: 700;
  span {
    font-size: 16px;
    color: #666;
    font-weight: 400;
  }
}
/deep/.info_data_middle {
  font-size: 30px;
  color:#ff5f3e;
  font-weight: 700;
  span {
    font-size: 16px;
    color: #666;
    font-weight: 400;
  }
}
/deep/.info_data_end {
  font-size: 30px;
  color: #6ac20b;
  font-weight: 700;
  span {
    font-size: 16px;
    color: #666;
    font-weight: 400;
  }
}
/deep/.van-cell-group {
  margin-top: 10px;
}
/deep/.van-cell__title {
  font-size: 16px;
}
</style>
